import { observer } from 'mobx-react'
import styles from './index.module.less'
import select from '@/resource/level/select.png'
import type { levelListType } from '@/pages/level/interface'
export default observer((props: any) => {
    const { Data, currentIndex } = props
    return (
        <div className={styles.page}>
            <div className={styles.top}>
                {Data.map((item: levelListType, index: number) => {
                    return (
                        <div className={styles.content} key={item.id}>
                            <div className={item.is_player === '1' ? styles.progress : styles.un_progress}>{index + 1}</div>
                            {index + 1 === Data.length ? null : <div className={item.is_player === '1' ? styles.un_right_progress : styles.right_progress} />}
                            {index === currentIndex ? <img src={select} /> : null}
                        </div>
                    )
                })}
            </div>
        </div>
    )
})
